import React, { useRef } from "react";
import { Button, Form, Input, Popup, Toast } from "antd-mobile";
import { useLogin } from "../../../../context/LoginContext";
import "./style.scss";

export default function NameComponent({ bg }: any) {
  const [form]: any = Form.useForm();
  const { state, dispatch }: any = useLogin();

  const handleName = (name: any) => {
    dispatch({ name });
  };

  const next = () => {
    if (!state?.name) {
      Toast.show("请输入昵称!");
      return;
    }
    dispatch({ showName: false, showAvatar: true });
  };

  return (
    <Popup visible={state?.showName} destroyOnClose={true}>
      <div className="container_popup_name" style={{ height: "100vh" }}>
        <img src={bg} alt="" style={{ width: "100%" }} />
        <div>
          <div className="that_header">
            <h2>欢迎您使用本系统，</h2>
            <h2>初次登录请输入您的以下信息</h2>
          </div>

          <Form
            layout="horizontal"
            form={form}
            footer={
              <>
                <Button
                  disabled={!state?.activeBtn}
                  onClick={next}
                  block
                  type="submit"
                  color="primary"
                  shape="rounded"
                >
                  下一步
                </Button>
                <div
                  className="skip"
                  onClick={() => {
                    dispatch({ name: "", showName: false, showAvatar: true });
                  }}
                >
                  跳过
                </div>
              </>
            }
          >
            <Form.Item name="name">
              <Input
                value={state?.name}
                placeholder="请输入昵称"
                clearable
                onChange={handleName}
              />
            </Form.Item>
          </Form>
        </div>
      </div>
    </Popup>
  );
}
